<div
  #dropdownRef
  class="po-dropdown"
  [class.po-dropdown-aa]="size === 'small'"
  [attr.disabled]="disabled"
  tabindex="{{ disabled ? -1 : 0 }}"
  (click)="toggleDropdown()"
  (keydown)="onKeyDown($event)"
>
  <div
    class="po-dropdown-button"
    [class.po-dropdown-button-aa]="size === 'small'"
    [ngClass]="{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }"
  >
    <span>{{ label }}</span>
    <po-icon class="po-dropdown-icon" [class.po-dropdown-icon-aa]="size === 'small'" [p-icon]="icon"></po-icon>
  </div>
</div>

<po-popup
  #popupRef
  p-hide-arrow
  p-is-corner-align
  p-position="bottom-left"
  [p-actions]="actions"
  [p-custom-positions]="['bottom-left', 'top-left']"
  [p-size]="size"
  [p-target]="dropdownRef"
  [p-listbox-subitems]="true"
>
</po-popup>
